<template>
  <el-dialog
    :visible.sync="methaneModal"
    append-to-body
    width="80%"
    custom-class="methaneDialog"
  >
    <div slot="title">
      <span>甲烷遥测</span>
      <img
        style="float: right; margin-right: 24px; cursor: pointer"
        :src="methaneDow"
        title="下载"
        @click="dowloadMethane"
      />
    </div>
    <div style="margin-bottom: 16px">
      <span class="methaneLabel">{{ $t("巡检对象名称：") }}</span
      ><span>{{ methaneData.deviceName }}</span>
    </div>
    <div v-if="methaneData.viewPointName" style="margin-bottom: 16px">
      <span class="methaneLabel">{{ $t("巡检点名称：") }}</span
      ><span>{{ methaneData.viewPointName }}</span>
    </div>
    <div
      style="display: flex; justify-content: space-between; margin-bottom: 24px"
    >
      <div>
        <span class="methaneLabel">{{ $t("采集信息：") }}</span>
        <img
          style="vertical-align: middle; width: 24px; height: 24px"
          src="../../assets/images/objectData/pictureBlue.svg"
          alt=""
        />
      </div>
      <div>
        <span class="methaneLabel">{{ $t("巡检结果：") }}</span>
        <span v-if="methaneData.deviceResult != null"
          >{{ methaneData.deviceResult
          }}{{ methaneData.unit ? methaneData.unit : "" }}</span
        >
        <span v-else>{{
          methaneData.deviceResult ? methaneData.deviceResult : "-"
        }}</span>
      </div>
      <div>
        <span class="methaneLabel">{{ $t("巡检时间：") }}</span>
        <span>{{ methaneData.createTime }}</span>
      </div>
    </div>
    <div ref="fullScreenT" style="border: 1px solid #33414c" id="methaneImg">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
        "
      >
        <!-- 拼图 -->
        <img
          style="cursor: pointer; position: absolute; top: 6px; right: 12px"
          :src="methaneFull"
          title="全屏显示"
          @click="fullScreenClick"
          id="fullId"
        />
        <div
          style="padding: 16px 52px; width: fit-content"
          class="allImg"
          id="allImg"
        >
          <div
            style="display: inline-block"
            v-for="(item, index) in methaneImg"
            :key="index"
            :class="[
              img360 ? (index == 1 ? 'img2' : '') : '',
              img360 ? (index == 6 ? 'img-1' : '') : '',
              img360 ? (index == 5 ? 'img-2' : '') : '',
            ]"
          >
            <img style="height: 128px" :src="item" alt="" />
          </div>
        </div>
        <!-- 折线图 -->
        <div>
          <div
            class="line-chart"
            id="oxChart"
            :style="{ height: '400px' }"
          ></div>
        </div>
      </div>
    </div>
    <div slot="footer" style="display: flex; justify-content: flex-end">
      <div @click="closeMethane" class="reset-btn cuver-point">
        {{ $t("关闭") }}
      </div>
    </div>
  </el-dialog>
</template>
<script>
import * as echarts from "echarts";
import screenfull from "screenfull";
import domtoimage from "dom-to-image";
import FileSaver from "file-saver";
import {
  API_methaneGet, //甲烷遥测
} from "@/api/data/inspectrecords.js";
export default {
  name: "",
  props: {},
  data() {
    return {
      methaneModal: false, //甲烷遥测弹框显隐
      methaneImg: [],
      methaneDow: require("@/assets/images/home/methaneDow.png"),
      methaneFull: require("@/assets/images/home/methaneFull.png"),
      isScreenFull: false, //是否全屏
      angleArr: [],
      valueArr: [],
      zeroFlag: false,
      img360: false,
      // sevePort: window.location.protocol + "//" + window.location.host,
      sevePort: "http://192.168.61.11",
    };
  },
  mounted() {},
  methods: {
    //导出甲烷遥测图片
    dowloadMethane() {
      let node = document.getElementById("methaneImg");
      let fullId = document.getElementById("fullId");
      fullId.style.display = "none";
      domtoimage
        .toJpeg(node, {
          bgcolor: "#00111F",
        })
        .then(function (dataUrl) {
          FileSaver.saveAs(dataUrl, "methane.jpg");
          fullId.style.display = "block";
        })
        .catch(function (error) {
          fullId.style.display = "block";
        });
    },
    /**全屏显示 */
    fullScreenClick() {
      if (!screenfull.isEnabled) {
        //判断一下浏览器是否支持全屏显示
        this.$message({
          message: this.$t("浏览器不能全屏"),
          type: "warning",
        });
        return false;
      }
      screenfull.toggle(this.$refs.fullScreenT);
    },
    //甲烷遥测
    open(methaneData) {
      this.methaneModal = true;
      this.methaneData = methaneData;
      this.getMethaneData(methaneData);
    },
    //甲烷遥测图表信息
    getMethaneData(item) {
      this.angleArr = [];
      this.valueArr = [];
      this.methaneImg = [];
      API_methaneGet({
        // deviceResultId: 1,
        deviceResultId: item.deviceResultId,
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.data) {
              res.data.ch4Result.forEach((item) => {
                this.angleArr.push(item.angle);
                this.valueArr.push(item.value);
              });
              this.zeroFlag = this.valueArr.some((item) => item == "0"); //数组每一项为0 纵坐标默认最大10
              let arr = [];
              arr = res.data.ch4PhotoList.split(",");
              arr.forEach((item) => {
                this.methaneImg.push(this.sevePort + item);
              });
              //0-360的时候 第一张和最后一张各显示半张
              if (this.angleArr.indexOf("360") != -1) {
                this.img360 = true;
              }
            }
            this.drawLineChart();
          }
        })
        .finally(() => {});
    },
    closeMethane() {
      this.methaneModal = false;
    },
    drawLineChart() {
      // 获取Dom
      var chartDom = document.getElementById("oxChart");
      var lineChart = echarts.init(chartDom);
      setTimeout(() => {
        lineChart.resize({
          width: document.getElementById("allImg").getBoundingClientRect()
            .width,
        });
      }, 100);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.angleArr,
          axisLine: {
            lineStyle: {
              color: "#667078", //x轴的颜色
            },
            textStyle: {
              color: "#9DA3A8",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            min: this.zeroFlag ? "10" : "0",
            axisLabel: {
              formatter: "{value} ",
            },
            axisLine: {
              lineStyle: {
                color: "#667078", //x轴的颜色
              },
              textStyle: {
                color: "#9DA3A8",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#878787",
                type: "dashed",
                width: 1,
              },
            },
          },
          {
            type: "value",
            name: "ppm",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#667078",
              },
            },
          },
        ],
        series: [
          {
            name: "甲烷浓度",
            data: this.valueArr,
            type: "line",
            lineStyle: {
              color: "#00D1FF", //折线的颜色
            },
            itemStyle: {
              normal: {
                color: "#00D1FF", //折线点的颜色
                borderColor: "#00D1FF", //拐点边框颜色
              },
            },
            markLine: {
              silent: true,
              lineStyle: {
                color: "#878787",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      option && lineChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="scss">
.methaneLabel {
  color: #a6acb1;
}
.img2 {
  margin-left: -114px;
}
.img-2 {
  position: relative;
  z-index: 222;
}
.img-1 {
  position: relative;
  margin-left: -114px;
  z-index: 111;
}
</style>
